<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动列表 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
    @layer utilities {
        .active-scale {
            transform: scale(0.95);
            transition: transform 0.1s ease;
        }
    }
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-white border border-primary text-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all;
            }
            .nav-item {
                @apply px-4 py-2 rounded-lg transition-all hover:bg-primary/10 cursor-pointer;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .form-input {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all;
            }
            .badge {
                @apply px-2 py-1 text-xs rounded-full;
            }
            .filter-item {
                @apply px-3 py-1.5 rounded-lg transition-all cursor-pointer text-sm hover:bg-primary/5;
            }
            .filter-item-active {
                @apply bg-primary text-white;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-primary">黄淮学院</h1>
                        <p class="text-xs text-info">校园活动管理系统</p>
                    </div>
                </div>
                
                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-2">
                    <a href="index.html" class="nav-item">首页</a>
                    <a href="activities.html" class="nav-item nav-item-active">活动列表</a>
                    <a href="discover.html" class="nav-item">发现</a>
                    <a href="about.html" class="nav-item">关于我们</a>
                </nav>
                
                <!-- 用户操作 -->
                <div class="flex items-center space-x-4">
                    <button id="searchBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all">
                        <i class="fa fa-search text-info"></i>
                    </button>
                    <button id="notificationsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all relative">
                        <i class="fa fa-bell text-info"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div id="userMenu" class="relative">
                        <button id="userMenuBtn" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg transition-all">
                            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                            <span class="hidden md:inline-block font-medium">游客</span>
                            <i class="fa fa-caret-down text-xs text-info"></i>
                        </button>
                        <!-- 用户下拉菜单 -->
                        <div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                            <a href="profile.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-o mr-2 text-info"></i>个人中心
                            </a>
                            <a href="login.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-sign-in mr-2 text-info"></i>登录
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-plus mr-2 text-info"></i>注册
                            </a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-all">
                        <i class="fa fa-bars text-info"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div id="searchBox" class="container mx-auto px-4 pb-4 hidden">
            <div class="relative">
                <input type="text" placeholder="搜索活动、主办方..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info"></i>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden container mx-auto px-4 pb-4 hidden">
            <nav class="flex flex-col space-y-1">
                <a href="index.html" class="nav-item">首页</a>
                <a href="activities.html" class="nav-item nav-item-active">活动列表</a>
                <a href="discover.html" class="nav-item">发现</a>
                <a href="about.html" class="nav-item">关于我们</a>
                <div class="pt-2 flex space-x-2">
                    <a href="login.html" class="btn-primary flex-1 text-center">登录</a>
                    <a href="register.html" class="btn-secondary flex-1 text-center">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="mb-8">
            <h1 class="text-3xl font-bold mb-2">活动列表</h1>
            <p class="text-info">浏览和搜索校园内的各类活动</p>
        </section>

        <!-- 筛选和搜索 -->
        <section class="bg-white rounded-xl shadow-sm p-6 mb-8">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div class="relative flex-1 md:max-w-lg">
                     <input id="searchInput" type="text" placeholder="搜索活动名称、关键词、时间或排序方式..." class="w-full pl-10 pr-12 py-2.5 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                     <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info"></i>
                     <button id="searchButton" class="absolute right-2 top-1/2 transform -translate-y-1/2 px-3 py-1.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors active:scale-95">搜索</button>
                     <!-- 搜索清除按钮 -->
                     <button id="clearSearchButton" class="hidden absolute right-20 top-1/2 transform -translate-y-1/2 w-6 h-6 flex items-center justify-center text-gray-400 hover:text-gray-600">
                         <i class="fa fa-times-circle"></i>
                     </button>
                 </div>
                
                <div class="flex flex-wrap gap-2">
                    <select id="typeFilter" class="form-input py-2.5 max-w-[150px]">
                        <option value="all">全部类型</option>
                        <option value="academic">学术活动</option>
                        <option value="culture">文化艺术</option>
                        <option value="sports">体育活动</option>
                        <option value="volunteer">社会实践</option>
                    </select>
                    <select id="timeFilter" class="form-input py-2.5 max-w-[150px]">
                        <option value="all">全部时间</option>
                        <option value="today">今天</option>
                        <option value="week">本周</option>
                        <option value="month">本月</option>
                    </select>
                    <select id="sortFilter" class="form-input py-2.5 max-w-[150px]">
                        <option value="default">默认排序</option>
                        <option value="newest">最新发布</option>
                        <option value="hot">热门程度</option>
                        <option value="deadline">截止时间</option>
                    </select>
                </div>
            </div>
            
            <!-- 标签筛选 -->
            <div class="mt-4 pt-4 border-t border-gray-100">
                <h3 class="text-sm font-medium text-gray-700 mb-2">快速筛选：</h3>
                <div class="flex flex-wrap gap-2">
                    <span class="filter-item filter-item-active" data-filter="all">全部活动</span>
                    <span class="filter-item" data-filter="academic">学术讲座</span>
                    <span class="filter-item" data-filter="culture">文化演出</span>
                    <span class="filter-item" data-filter="sports">体育比赛</span>
                    <span class="filter-item" data-filter="volunteer">志愿活动</span>
                    <span class="filter-item" data-filter="innovation">创新创业</span>
                    <span class="filter-item" data-filter="recruitment">社团招新</span>
                </div>
            </div>
        </section>

        <!-- 活动列表 -->
        <section class="mb-8">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- 活动卡片 1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover" data-type="academic" data-date="2023-11-20" data-hot="95" data-total-participants="72" data-deadline="2023-11-18" data-publish-date="2023-11-01">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1019/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-primary/90 text-white">热门</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">第12届校园科技创新大赛</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 科技学院</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-11-20</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">展示学生科技创新成果，促进学术交流与合作，激发创新思维。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 28</span>
                                <span class="text-xs text-info ml-1">/ 100人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                
                <!-- 活动卡片 2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover" data-type="sports" data-date="2023-12-05" data-hot="85" data-total-participants="344" data-deadline="2023-12-03" data-publish-date="2023-11-25">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1025/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-warning/90 text-white">新活动</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">校园春季运动会</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 体育部</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-05</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">展现学生体育风采，增强体质，培养团队精神和竞争意识。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 156</span>
                                <span class="text-xs text-info ml-1">/ 500人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                
                <!-- 活动卡片 3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover" data-type="culture" data-date="2023-12-15" data-hot="98" data-total-participants="300" data-deadline="2023-12-10" data-publish-date="2023-11-28">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1031/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">校园歌手大赛总决赛</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 学生会</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-15</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">见证校园歌王的诞生，享受一场视听盛宴，为你喜欢的选手加油助威！</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 0</span>
                                <span class="text-xs text-info ml-1">/ 300人</span>
                            </div>
                            <button class="bg-gray-200 text-gray-500 px-4 py-2 rounded-lg cursor-not-allowed">已报满</button>
                        </div>
                    </div>
                </div>
                
                <!-- 活动卡片 4 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover" data-type="academic" data-date="2023-12-10" data-hot="80" data-total-participants="64" data-deadline="2023-12-08" data-publish-date="2023-11-30">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1039/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">大数据技术前沿讲座</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 计算机学院</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-10</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">邀请行业专家分享大数据技术的最新发展趋势和应用案例。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 56</span>
                                <span class="text-xs text-info ml-1">/ 120人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                
                <!-- 活动卡片 5 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover" data-type="culture" data-date="2023-12-12" data-hot="75" data-total-participants="0" data-deadline="2023-12-12" data-publish-date="2023-12-01">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1040/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-info/90 text-white">学术</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">书法作品展</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 文学院</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-12</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">展示校园书法爱好者的优秀作品，弘扬中华传统文化。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-success font-medium">免费参与</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                
                <!-- 活动卡片 6 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-sm card-hover" data-type="volunteer" data-date="2023-11-25" data-hot="88" data-total-participants="150" data-deadline="2023-11-22" data-publish-date="2023-11-15">
                    <div class="relative">
                        <img src="https://picsum.photos/id/1041/600/300" alt="活动封面" class="w-full h-48 object-cover">
                        <span class="absolute top-3 left-3 badge bg-secondary/90 text-white">志愿</span>
                        <button class="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/80 backdrop-blur-sm flex items-center justify-center text-info hover:text-danger transition-all">
                            <i class="fa fa-heart-o"></i>
                        </button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-2 line-clamp-1">社区服务志愿者招募</h3>
                        <div class="flex items-center text-xs text-info mb-3">
                            <span class="flex items-center"><i class="fa fa-building-o mr-1"></i> 青年志愿者协会</span>
                            <span class="mx-2">|</span>
                            <span class="flex items-center"><i class="fa fa-calendar-o mr-1"></i> 2023-12-15</span>
                        </div>
                        <p class="text-sm text-gray-600 mb-4 line-clamp-2">参与社区服务，传递爱心，为社会贡献自己的一份力量。</p>
                        <div class="flex justify-between items-center">
                            <div class="flex items-center">
                                <span class="text-danger font-medium">剩余 32</span>
                                <span class="text-xs text-info ml-1">/ 50人</span>
                            </div>
                            <a href="activity-detail.html" class="btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 搜索无结果提示 -->
            <div id="noResultsMessage" class="hidden text-center py-12">
                <div class="flex justify-center mb-4">
                    <i class="fa fa-search text-4xl text-gray-300"></i>
                </div>
                <h3 class="text-xl font-medium text-gray-600 mb-2">未找到相关活动</h3>
                <p class="text-gray-500">请尝试使用其他关键词或筛选条件</p>
                <button onclick="resetFilters()" class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    重置筛选条件
                </button>
            </div>
        </section>

        <!-- 分页 -->
        <section class="flex justify-center">
            <nav id="pagination" class="flex items-center space-x-1">
                <a href="#" class="page-prev px-3 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 transition-all">
                    <i class="fa fa-angle-left"></i>
                </a>
                <a href="#" class="page-number px-4 py-2 rounded-lg bg-primary text-white font-medium" data-page="1">1</a>
                <a href="#" class="page-number px-4 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 transition-all" data-page="2">2</a>
                <a href="#" class="page-number px-4 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 transition-all" data-page="3">3</a>
                <span class="px-2 text-gray-400">...</span>
                <a href="#" class="page-number px-4 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 transition-all" data-page="12">12</a>
                <a href="#" class="page-next px-3 py-2 rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 transition-all">
                    <i class="fa fa-angle-right"></i>
                </a>
            </nav>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">黄淮学院</h3>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">校园活动管理系统致力于为全校师生提供便捷的活动信息服务平台。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition-all">首页</a></li>
                        <li><a href="activities.html" class="hover:text-white transition-all">活动列表</a></li>
                        <li><a href="discover.html" class="hover:text-white transition-all">发现</a></li>
                        <li><a href="about.html" class="hover:text-white transition-all">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="faq.html" class="hover:text-white transition-all">常见问题</a></li>
                        <li><a href="contact.html" class="hover:text-white transition-all">联系我们</a></li>
                        <li><a href="privacy.html" class="hover:text-white transition-all">隐私政策</a></li>
                        <li><a href="terms.html" class="hover:text-white transition-all">用户协议</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>河南省驻马店市开源大道6号黄淮学院</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3"></i>
                            <span>0396-2853611</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3"></i>
                            <span>contact@huanghuai.edu.cn</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-white/10 text-center text-gray-500 text-sm">
                <p>© 2023 黄淮学院校园活动管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
        <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="js/activities.js"></script>

        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
        <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="js/activities.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 收藏按钮功能
            document.querySelectorAll('.fa-heart-o').forEach(heartIcon => {
                const button = heartIcon.closest('button');
                button.addEventListener('click', function() {
                    // 切换图标和颜色
                    if (heartIcon.classList.contains('fa-heart-o')) {
                        // 切换为收藏状态
                        heartIcon.classList.remove('fa-heart-o');
                        heartIcon.classList.add('fa-heart');
                        button.classList.remove('text-info');
                        button.classList.add('text-danger');
                    } else {
                        // 切换为未收藏状态
                        heartIcon.classList.remove('fa-heart');
                        heartIcon.classList.add('fa-heart-o');
                        button.classList.remove('text-danger');
                        button.classList.add('text-info');
                    }
                });
            });
            
            // 筛选功能
            const filterItems = document.querySelectorAll('.filter-item');
            const activityCards = document.querySelectorAll('[data-type]');
            const typeFilterSelect = document.getElementById('typeFilter');
            const timeFilter = document.getElementById('timeFilter');
            const sortFilter = document.getElementById('sortFilter');
            
            // 标签筛选功能
            filterItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 移除所有筛选按钮的活跃状态
                    filterItems.forEach(btn => btn.classList.remove('filter-item-active'));
                    // 添加当前按钮的活跃状态
                    this.classList.add('filter-item-active');
                    
                    const filterType = this.getAttribute('data-filter');
                    
                    // 更新下拉选择框
                    typeFilterSelect.value = filterType;
                    
                    // 筛选活动卡片
                    filterCards(filterType);
                });
            });
            
            // 下拉选择框筛选功能
            typeFilterSelect.addEventListener('change', function() {
                const filterType = this.value;
                
                // 更新标签筛选的活跃状态
                filterItems.forEach(item => {
                    if (item.getAttribute('data-filter') === filterType) {
                        item.classList.add('filter-item-active');
                    } else {
                        item.classList.remove('filter-item-active');
                    }
                });
                
                // 筛选活动卡片
                filterCards(filterType);
            });
            
            // 时间筛选功能
            document.getElementById('timeFilter').addEventListener('change', function() {
                const timeFilter = this.value;
                filterByDate(timeFilter);
            });
            
            // 根据日期筛选活动卡片的函数
            function filterByDate(timeRange) {
                const today = new Date();
                const currentDate = today.toISOString().split('T')[0]; // 格式化为 YYYY-MM-DD
                
                activityCards.forEach(card => {
                    const activityDate = card.getAttribute('data-date');
                    const activityDateObj = new Date(activityDate);
                    
                    if (timeRange === 'all') {
                        // 显示所有卡片
                        card.style.display = 'block';
                    } else if (timeRange === 'today') {
                        // 只显示今天的活动
                        if (activityDate === currentDate) {
                            card.style.display = 'block';
                        } else {
                            card.style.display = 'none';
                        }
                    } else if (timeRange === 'week') {
                        // 只显示本周的活动（从周日到周六）
                        const dayOfWeek = today.getDay(); // 0 = 周日, 6 = 周六
                        const diff = today.getDate() - dayOfWeek;
                        const monday = new Date(today);
                        monday.setDate(diff);
                        monday.setHours(0, 0, 0, 0);
                        
                        const sunday = new Date(monday);
                        sunday.setDate(monday.getDate() + 6);
                        sunday.setHours(23, 59, 59, 999);
                        
                        if (activityDateObj >= monday && activityDateObj <= sunday) {
                            card.style.display = 'block';
                        } else {
                            card.style.display = 'none';
                        }
                    } else if (timeRange === 'month') {
                        // 只显示本月的活动
                        const currentYear = today.getFullYear();
                        const currentMonth = today.getMonth();
                        const activityYear = activityDateObj.getFullYear();
                        const activityMonth = activityDateObj.getMonth();
                        
                        if (activityYear === currentYear && activityMonth === currentMonth) {
                            card.style.display = 'block';
                        } else {
                            card.style.display = 'none';
                        }
                    }
                });
            }
            
            // 排序功能实现
            document.getElementById('sortFilter').addEventListener('change', function() {
                const sortType = this.value;
                sortActivityCards(sortType);
            });
            
            // 排序活动卡片的函数
            function sortActivityCards(sortType) {
                const cardsContainer = document.querySelector('.grid');
                const cardsArray = Array.from(activityCards);
                
                // 根据不同的排序方式进行排序
                switch (sortType) {
                    case 'default':
                        // 默认排序，按原始顺序
                        break;
                        
                    case 'newest':
                        // 按发布日期排序（最新发布在前）
                        cardsArray.sort((a, b) => {
                            const dateA = new Date(a.getAttribute('data-publish-date'));
                            const dateB = new Date(b.getAttribute('data-publish-date'));
                            return dateB - dateA;
                        });
                        break;
                        
                    case 'hot':
                        // 按热门程度排序（根据热度值和报名人数）
                        cardsArray.sort((a, b) => {
                            const hotA = parseInt(a.getAttribute('data-hot'));
                            const hotB = parseInt(b.getAttribute('data-hot'));
                            return hotB - hotA;
                        });
                        break;
                        
                    case 'deadline':
                        // 按截止时间排序（快到期的在前）
                        cardsArray.sort((a, b) => {
                            const deadlineA = new Date(a.getAttribute('data-deadline'));
                            const deadlineB = new Date(b.getAttribute('data-deadline'));
                            return deadlineA - deadlineB;
                        });
                        break;
                }
                
                // 重新排列DOM中的卡片
                if (sortType !== 'default') {
                    // 先移除所有卡片
                    cardsArray.forEach(card => cardsContainer.removeChild(card));
                    // 再按排序后的顺序添加卡片
                    cardsArray.forEach(card => cardsContainer.appendChild(card));
                }
                
                // 确保当前筛选状态下不可见的卡片仍然保持隐藏
                const activeFilter = document.querySelector('.filter-item-active');
                if (activeFilter) {
                    const filterType = activeFilter.getAttribute('data-filter');
                    if (filterType !== 'all') {
                        activityCards.forEach(card => {
                            if (card.getAttribute('data-type') !== filterType) {
                                card.style.display = 'none';
                            }
                        });
                    }
                }
                
                // 检查时间筛选状态
                const timeFilter = document.getElementById('timeFilter').value;
                if (timeFilter !== 'all') {
                    filterByDate(timeFilter);
                }
            }
            
            // 统一的卡片筛选函数
            function filterCards(filterType) {
                activityCards.forEach(card => {
                    if (filterType === 'all' || card.getAttribute('data-type') === filterType) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                });
            }
            
            // 搜索功能 - 支持搜索活动名称、关键词以及下拉选项中的关键词
            const searchInput = document.getElementById('searchInput');
            
            // 输入事件监听
            searchInput.addEventListener('input', function() {
                performSearch(this.value);
            });
            
            // 键盘回车事件监听
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    performSearch(this.value);
                }
            });
            
            // 监听输入变化，显示/隐藏清除按钮
            searchInput.addEventListener('input', function() {
                const clearButton = document.getElementById('clearSearchButton');
                if (this.value.trim()) {
                    clearButton.classList.remove('hidden');
                } else {
                    clearButton.classList.add('hidden');
                    // 输入框为空时重置搜索
                    resetFilters();
                }
                
                // 输入时添加视觉反馈
                this.classList.add('border-primary');
                setTimeout(() => {
                    if (!this.classList.contains('focus')) {
                        this.classList.remove('border-primary');
                    }
                }, 300);
            });
            
            // 清除搜索按钮点击事件
            document.getElementById('clearSearchButton').addEventListener('click', function() {
                searchInput.value = '';
                this.classList.add('hidden');
                resetFilters();
                searchInput.focus();
            });
            
            // 搜索按钮点击时添加视觉反馈
            document.getElementById('searchButton').addEventListener('mousedown', function() {
                this.classList.add('active-scale');
            });
            
            document.getElementById('searchButton').addEventListener('mouseup', function() {
                this.classList.remove('active-scale');
            });
            
            // 搜索按钮点击事件，触发搜索功能
            document.getElementById('searchButton').addEventListener('click', function() {
                // 使用专门的标题检索函数
                searchByTitle(searchInput.value);
            });
            
            // 添加键盘事件支持，按回车键触发搜索
            document.getElementById('searchInput').addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    searchByTitle(this.value);
                }
            });
            
            // 专门的标题检索函数
            function searchByTitle(searchValue) {
                const searchTerm = searchValue.toLowerCase().trim();
                let hasResults = false;
                
                activityCards.forEach(card => {
                    // 获取卡片标题
                    const originalTitle = card.querySelector('h3').textContent;
                    const title = originalTitle.toLowerCase();
                    
                    // 判断标题是否包含搜索词
                    const isMatch = title.includes(searchTerm);
                    
                    if (isMatch) {
                        card.style.display = 'block';
                        hasResults = true;
                        
                        // 高亮显示匹配的文本
                        const regex = new RegExp(searchTerm, 'gi');
                        const highlightedTitle = originalTitle.replace(regex, match => `<mark class="bg-yellow-200 px-0.5 rounded">${match}</mark>`);
                        card.querySelector('h3').innerHTML = highlightedTitle;
                    } else {
                        card.style.display = 'none';
                        
                        // 恢复原始内容（移除高亮）
                        card.querySelector('h3').textContent = originalTitle;
                    }
                });
                
                // 显示/隐藏无结果提示
                const noResultsElement = document.getElementById('noResultsMessage');
                if (noResultsElement) {
                    noResultsElement.style.display = hasResults ? 'none' : 'block';
                }
                
                // 搜索后重置到第一页
                currentPage = 1;
                updatePaginationState();
            }
            
            // 搜索功能核心函数
            function performSearch(searchValue) {
                const searchTerm = searchValue.toLowerCase().trim();
                
                // 如果搜索框为空，重置到初始状态
                if (!searchTerm) {
                    // 重置所有筛选和排序
                    resetFilters();
                    return;
                }
                
                // 处理下拉选项关键词搜索
                const isTimeKeyword = checkTimeKeyword(searchTerm);
                const isSortKeyword = checkSortKeyword(searchTerm);
                const isCategoryKeyword = checkCategoryKeyword(searchTerm);
                
                // 如果是特殊关键词，更新对应控件并触发筛选
                if (isTimeKeyword) {
                    timeFilter.value = isTimeKeyword;
                    filterByDate(isTimeKeyword); // 实际调用时间筛选函数
                    console.log('应用时间筛选:', isTimeKeyword);
                } else if (isSortKeyword) {
                    sortFilter.value = isSortKeyword;
                    sortActivityCards(isSortKeyword); // 实际调用排序函数
                    console.log('应用排序方式:', isSortKeyword);
                } else if (isCategoryKeyword) {
                    // 找到对应的分类按钮并点击它
                    const categoryButton = document.querySelector(`.filter-item[data-filter="${isCategoryKeyword}"]`);
                    if (categoryButton) {
                        // 先移除所有活动状态
                        document.querySelectorAll('.filter-item').forEach(btn => {
                            btn.classList.remove('filter-item-active');
                        });
                        // 添加当前活动状态
                        categoryButton.classList.add('filter-item-active');
                        // 应用分类筛选
                        filterCards(isCategoryKeyword);
                        console.log('应用分类筛选:', isCategoryKeyword);
                    }
                } else {
                    // 常规搜索：搜索活动名称、描述、部门、日期、标签等信息
                    let hasResults = false;
                    
                    // 预处理搜索词，提取重要关键词
                    const searchKeywords = searchTerm.split(/[\s,，]+/).filter(word => word.length > 0);
                    
                    activityCards.forEach(card => {
                        // 存储原始内容，用于后续恢复
                        const originalTitle = card.querySelector('h3').textContent;
                        const originalDescription = card.querySelector('p').textContent;
                        
                        // 获取卡片中所有可搜索的文本内容
                        const title = originalTitle.toLowerCase();
                        const description = originalDescription.toLowerCase();
                        const department = card.querySelector('.flex.items-center span:first-child').textContent.toLowerCase();
                        const date = card.querySelector('.fa-calendar-o').nextElementSibling.textContent.toLowerCase();
                        const activityType = card.getAttribute('data-type');
                        
                        // 搜索活动标签（如新活动、热门等）
                        let tagText = '';
                        const tagElement = card.querySelector('.badge');
                        if (tagElement) {
                            tagText = tagElement.textContent.toLowerCase();
                        }
                        
                        // 搜索剩余人数信息
                        const remainingSlotsText = card.querySelector('.text-danger.font-medium').textContent.toLowerCase();
                        const totalSlotsText = card.querySelector('.text-xs.text-info.ml-1').textContent.toLowerCase();
                        
                        // 组合所有可搜索的内容
                        const allSearchableContent = `${title} ${description} ${department} ${date} ${activityType} ${tagText} ${remainingSlotsText} ${totalSlotsText}`;
                        
                        // 判断是否匹配搜索条件
                        let isMatch = false;
                        
                        if (searchKeywords.length > 0) {
                            // 多关键词搜索，只要匹配任一关键词就算匹配
                            isMatch = searchKeywords.some(keyword => allSearchableContent.includes(keyword));
                        } else {
                            // 单关键词搜索
                            isMatch = allSearchableContent.includes(searchTerm);
                        }
                        
                        if (isMatch) {
                            card.style.display = 'block';
                            hasResults = true;
                            
                            // 高亮显示匹配的文本（简单实现）
                            if (searchKeywords.length > 0) {
                                // 对标题进行高亮
                                let highlightedTitle = originalTitle;
                                searchKeywords.forEach(keyword => {
                                    const regex = new RegExp(keyword, 'gi');
                                    highlightedTitle = highlightedTitle.replace(regex, match => `<mark class="bg-yellow-200 px-0.5 rounded">${match}</mark>`);
                                });
                                card.querySelector('h3').innerHTML = highlightedTitle;
                                
                                // 对描述进行高亮
                                let highlightedDescription = originalDescription;
                                searchKeywords.forEach(keyword => {
                                    const regex = new RegExp(keyword, 'gi');
                                    highlightedDescription = highlightedDescription.replace(regex, match => `<mark class="bg-yellow-200 px-0.5 rounded">${match}</mark>`);
                                });
                                card.querySelector('p').innerHTML = highlightedDescription;
                            } else {
                                // 单关键词高亮
                                const regex = new RegExp(searchTerm, 'gi');
                                let highlightedTitle = originalTitle.replace(regex, match => `<mark class="bg-yellow-200 px-0.5 rounded">${match}</mark>`);
                                let highlightedDescription = originalDescription.replace(regex, match => `<mark class="bg-yellow-200 px-0.5 rounded">${match}</mark>`);
                                
                                card.querySelector('h3').innerHTML = highlightedTitle;
                                card.querySelector('p').innerHTML = highlightedDescription;
                            }
                        } else {
                            card.style.display = 'none';
                            
                            // 恢复原始内容（移除高亮）
                            card.querySelector('h3').textContent = originalTitle;
                            card.querySelector('p').textContent = originalDescription;
                        }
                    });
                    
                    // 如果没有搜索结果，显示提示信息（如果存在）
                    const noResultsElement = document.getElementById('noResultsMessage');
                    if (noResultsElement) {
                        noResultsElement.style.display = hasResults ? 'none' : 'block';
                    }
                }
                
                // 搜索后重置到第一页
                currentPage = 1;
                updatePaginationState();
            }
            
            // 检查是否是时间关键词
            function checkTimeKeyword(term) {
                const timeKeywords = {
                    '全部': 'all',
                    '今天': 'today',
                    '本周': 'week',
                    '本月': 'month'
                };
                
                for (const [keyword, value] of Object.entries(timeKeywords)) {
                    if (term.includes(keyword) || term === value) {
                        return value;
                    }
                }
                return false;
            }
            
            // 检查是否是排序关键词
            function checkSortKeyword(term) {
                const sortKeywords = {
                    '默认': 'default',
                    '最新发布': 'newest',
                    '热门': 'hot',
                    '截止时间': 'deadline'
                };
                
                for (const [keyword, value] of Object.entries(sortKeywords)) {
                    if (term.includes(keyword) || term === value) {
                        return value;
                    }
                }
                return false;
            }
            
            // 检查是否是分类关键词
            function checkCategoryKeyword(term) {
                const categoryKeywords = {
                    '全部': 'all',
                    '学术讲座': 'academic',
                    '体育赛事': 'sports',
                    '文化活动': 'culture',
                    '志愿活动': 'volunteer'
                };
                
                for (const [keyword, value] of Object.entries(categoryKeywords)) {
                    if (term.includes(keyword) || term === value) {
                        return value;
                    }
                }
                return false;
            }
            
            // 重置所有筛选器
            function resetFilters() {
                // 重置搜索框
                searchInput.value = '';
                document.getElementById('clearSearchButton').classList.add('hidden');
                
                // 重置类型筛选
                document.querySelectorAll('.filter-item').forEach(btn => {
                    btn.classList.remove('filter-item-active');
                });
                document.querySelector('.filter-item[data-filter="all"]').classList.add('filter-item-active');
                filterCards('all');
                
                // 重置时间筛选
                timeFilter.value = 'all';
                
                // 重置排序
                sortFilter.value = 'default';
                
                // 重置分页
                currentPage = 1;
                updatePaginationState();
                
                // 隐藏无结果提示
                const noResultsElement = document.getElementById('noResultsMessage');
                if (noResultsElement) {
                    noResultsElement.style.display = 'none';
                }
                
                // 恢复所有卡片的原始内容（移除高亮）
                activityCards.forEach(card => {
                    const titleElement = card.querySelector('h3');
                    const descElement = card.querySelector('p');
                    
                    // 如果内容包含HTML标记，恢复为纯文本
                    if (titleElement.innerHTML !== titleElement.textContent) {
                        titleElement.textContent = titleElement.textContent;
                    }
                    if (descElement.innerHTML !== descElement.textContent) {
                        descElement.textContent = descElement.textContent;
                    }
                });
            }
            
            // 搜索按钮点击事件
            document.getElementById('searchButton').addEventListener('click', function() {
                performSearch(searchInput.value);
            });
            
            // 全局暴露resetFilters函数，使其可以从HTML中直接调用
              window.resetFilters = resetFilters;
            
            // 检查是否是时间关键词
            function checkTimeKeyword(term) {
                const timeKeywords = {
                    '全部时间': 'all',
                    '今天': 'today',
                    '本周': 'week',
                    '本月': 'month'
                };
                
                for (const [keyword, value] of Object.entries(timeKeywords)) {
                    if (term.includes(keyword) || term === value) {
                        return value;
                    }
                }
                return false;
            }
            
            // 检查是否是排序关键词
            function checkSortKeyword(term) {
                const sortKeywords = {
                    '默认排序': 'default',
                    '最新发布': 'newest',
                    '热门程度': 'hot',
                    '截止时间': 'deadline'
                };
                
                for (const [keyword, value] of Object.entries(sortKeywords)) {
                    if (term.includes(keyword) || term === value) {
                        return value;
                    }
                }
                return false;
            }
            
            // 分页功能实现
            let currentPage = 1;
            const totalPages = 12;
            const itemsPerPage = 6; // 每页显示的活动卡片数量
            
            // 获取分页相关的元素
            const pageNumbers = document.querySelectorAll('.page-number');
            const prevButton = document.querySelector('.page-prev');
            const nextButton = document.querySelector('.page-next');
            
            // 初始化分页状态
            updatePaginationState();
            
            // 页码点击事件
            pageNumbers.forEach(page => {
                page.addEventListener('click', function(e) {
                    e.preventDefault();
                    const pageNum = parseInt(this.getAttribute('data-page'));
                    goToPage(pageNum);
                });
            });
            
            // 上一页按钮点击事件
            prevButton.addEventListener('click', function(e) {
                e.preventDefault();
                if (currentPage > 1) {
                    goToPage(currentPage - 1);
                }
            });
            
            // 下一页按钮点击事件
            nextButton.addEventListener('click', function(e) {
                e.preventDefault();
                if (currentPage < totalPages) {
                    goToPage(currentPage + 1);
                }
            });
            
            // 跳转到指定页面
            function goToPage(pageNum) {
                currentPage = pageNum;
                updatePaginationState();
                
                // 模拟分页显示 - 在实际项目中，这里应该根据页码加载相应的数据
                // 这里我们只是简单地显示/隐藏卡片来模拟分页效果
                simulatePagination();
            }
            
            // 更新分页按钮状态
            function updatePaginationState() {
                // 更新页码按钮样式
                pageNumbers.forEach(page => {
                    const pageNum = parseInt(page.getAttribute('data-page'));
                    if (pageNum === currentPage) {
                        page.classList.add('bg-primary', 'text-white');
                        page.classList.remove('border', 'border-gray-300', 'text-gray-600');
                    } else {
                        page.classList.remove('bg-primary', 'text-white');
                        page.classList.add('border', 'border-gray-300', 'text-gray-600');
                    }
                });
                
                // 更新上一页/下一页按钮状态
                if (currentPage === 1) {
                    prevButton.classList.add('opacity-50', 'cursor-not-allowed');
                } else {
                    prevButton.classList.remove('opacity-50', 'cursor-not-allowed');
                }
                
                if (currentPage === totalPages) {
                    nextButton.classList.add('opacity-50', 'cursor-not-allowed');
                } else {
                    nextButton.classList.remove('opacity-50', 'cursor-not-allowed');
                }
            }
            
            // 模拟分页显示功能
            function simulatePagination() {
                // 获取所有活动卡片
                const allCards = Array.from(activityCards);
                
                // 计算当前页应该显示的卡片
                const startIndex = (currentPage - 1) * itemsPerPage;
                const endIndex = startIndex + itemsPerPage;
                
                // 先应用当前的筛选条件
                let filteredCards = [];
                const activeFilter = document.querySelector('.filter-item-active');
                const timeFilterValue = document.getElementById('timeFilter').value;
                
                // 应用类型筛选
                if (activeFilter) {
                    const filterType = activeFilter.getAttribute('data-filter');
                    if (filterType === 'all') {
                        filteredCards = [...allCards];
                    } else {
                        filteredCards = allCards.filter(card => card.getAttribute('data-type') === filterType);
                    }
                } else {
                    filteredCards = [...allCards];
                }
                
                // 应用时间筛选（简化版）
                if (timeFilterValue !== 'all') {
                    // 这里我们只是模拟，实际项目中应该使用之前实现的filterByDate函数
                    // 为了演示，我们假设当前只有第1页的卡片符合时间筛选条件
                    filteredCards = filteredCards.slice(0, itemsPerPage);
                }
                
                // 根据分页索引显示/隐藏卡片
                allCards.forEach((card, index) => {
                    // 先隐藏所有卡片
                    card.style.display = 'none';
                });
                
                // 显示当前页应该显示的卡片
                filteredCards.slice(startIndex, endIndex).forEach(card => {
                    card.style.display = 'block';
                });
            }
        });
    </script>
</body>
</html>